import { useState, useEffect } from 'react'
import React from 'react';
import { Table, Switch, Input, Popconfirm, Button, message } from 'antd'
import App from './sevices/api'
// import Search from 'antd/es/transfer/search'
// import style from './style.module.scss'
// const {changeimg} = style

// const { Search } = Input;
const APP = () => {
  const [key, setKey] = useState('')
  const [list, setList] = useState([])
  const [newlist, setNewList] = useState([])
  const getAppList = async () => {
    let res = await App['getAPP']()
    console.log(res);
    setList(res.data)
  }
  const confirm = async (id) => {
    let res = await App['delAPP'](id)
    console.log(res);
    getAppList()
  }
  const cancel = () => {
    message.error('取消删除');

  }
  const clearchange = (e) => {
    setKey(e.target.value)
    if (key == '') {
      // setList([])
      console.log(1);

    }
  }
  const Search = async (key) => {
    console.log(key);
    let res = await App['serchApp'](key)
    console.log(res.data.data);
    // getAppList()
    // setNewList(res.data.data)
    setList(list.filter(item => 
        item.tel.includes(key)
    ))
  }
  useEffect(() => { getAppList() }, [])
  const columns = [{
    title: "序号",
    render: (_, row, index) => <span>{index + 1}</span>
  },
  {
    title: "电话",
    render: (_, row, index) => <span>{row.tel}</span>
  }
    ,
  {
    title: "密码",
    render: (_, row, index) => <span>{row.password}</span>
  },
  {
    title: "用户名",
    render: (_, row, index) => <span>{row.username}</span>
  },
  {
    title: "用户id",
    render: (_, row, index) => <span>{row.userid}</span>
  },
  {
    title: "操作",
    render: (_, row, index) => <div><Popconfirm

      title="删除？"
      description="确定要删除？"
      onConfirm={() => confirm(row.id)}
      onCancel={cancel}
      okText="是"
      cancelText="否"
    >
      <Button >删除</Button>

    </Popconfirm>
      {/* <Button onClick={() => show(row)}>编辑</Button> */}

    </div>
  }

  ]
  return (<>
    <Input style={{ width: '200px' }} value={key} onChange={e => clearchange(e)} onPressEnter={() => Search(key)}></Input><Button color=''>确认</Button>
    {/* <Search/> */}
    <Table rowKey='id' columns={columns} dataSource={list} />

  </>)
}

export default APP